<template>
  <div>
    <h3 v-if="formDis" class="title">查看详情</h3>
    <h3 v-else class="title">新增报名</h3>
    <el-form
      ref="resList"
      :name="resList"
      :model="resList"
      :rules="rules"
      :disabled="formDis"
      label-width="120px"
      class="demo-ruleForm"
      style="margin-top: 20px;">
      <el-form-item label="征集活动名称" prop="title">
        <el-col :span="23" >
          <el-input v-model="resList.title" :disabled="isEdit" maxlength="20" placeholder="请输入征集活动名称，限制20个字符"/>
        </el-col>
      </el-form-item>
      <!-- <el-form-item v-if="formDis" label="昵称" prop="nickName">
        <el-col :span="6" >
          <el-input v-model="resList.nickName" :disabled="isEdit" maxlength="20" placeholder="请输入报名入口名称"/>
        </el-col>
      </el-form-item>
      <el-form-item label="手机号" prop="">
        <el-col :span="6" >
          <el-input v-model="resList.phoneNum" :disabled="isEdit" maxlength="20" placeholder="请输入报名入口名称"/>
        </el-col>
      </el-form-item> -->
      <el-form-item label="作品介绍" prop="">
        <el-col :span="23" >
          <div>
            <div v-if="formDis" class="tin_box" v-html="$xss(resList.introduction)" />
            <tinymce v-else v-model="resList.introduction" :height="260" :disabled="tinymceDis" />
          </div>
        </el-col>
      </el-form-item>
      <el-form-item :class="formDis?'':'add_tip'" label="作品" prop="cost">
        <el-col :span="23" >
          <div class="fl">
            <div v-if="resList.fileType===1" class="thumbnail">
              <img v-show="resList.mediaFileUrl" :src="resList.mediaFileUrl" alt="">
            </div>
            <!-- :poster="prductForm.imgUrl" -->
            <video
              v-if="resList.fileType===2"
              :src="resList.mediaFileUrl"
              class="avatar video-avatar"
              style="width: 320px;height:180px"
              controls="controls">
              您的浏览器不支持视频播放
            </video>
            <!-- <div v-if="!formDis" class="uploadBox">
              <vueCropper
                :fixed-number="[16,8]"
                :limit="1"
                img-type="slt"
                class="upload-demo fl"
                @modalShowFn="getModalStatus" />
              <el-button v-show="resList.imgUrl" class="btn_clear fr" size="small" type="info" @click="clearPic()">清除</el-button>
            </div> -->
          </div>
        </el-col>
      </el-form-item>
    </el-form>
    <el-button v-preventReClick style="margin:20px" @click="$router.go(-1)">关闭</el-button>

  </div>
</template>

<script>
import config from '@/utils/config';
import Tinymce from '@/components/Tinymce'
import { GetQiniuToken } from '@/utils/qiniuUpload.js'
import { Message } from 'element-ui'
import mixin from '@/mixin'
// import { provinceAndCityData, regionData, CodeToText, TextToCode } from 'element-china-area-data'
import { getLocalUserName, setLocalUserName } from '@/utils/uid'

import vueCropper from '@/components/cropper'
import UploadImg from '@/components/cropper/uploadImage.vue'
import { getActivityInfo, addActivity, getActivityWorkDetail } from '@/api/activity'

export default {
  components: { Tinymce, vueCropper, UploadImg },
  mixins: [mixin],
  data() {
    return {
      resList: {
        name: '',
        introduction: '',
        imgUrl: '',
        recommendStatus: ''
      },
      rules: {
        name: [
          { required: true, message: '征集活动名称', trigger: 'blur' },
          { max: 40, message: '输入字符不得超过40个', trigger: 'blur' }
        //   { pattern: /^[A-z0-9\u4e00-\u9fa5]*$/, message: '不能含有特殊字符', trigger: 'blur' }
        ],
        introduction: [
          { required: true, message: '作品介绍', trigger: 'change' }
          // { max: 100, message: '输入字符不得超过100个', trigger: 'blur' }
        ],
        // imgUrl: [
        //   { required: true, message: '请输入手机号码', trigger: 'blur' },
        //   { validator: validateimgUrl, message: '请输入正确地手机号码', trigger: 'blur' }
        //   // { validator: validateNum, message: '请输入数字', trigger: 'blur' },
        //   // { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '数值需大于0', trigger: 'blur' }
        // ],
        recommendStatus: [
          { required: true, message: '请选择是否推荐', trigger: 'change' }
          // { validator: validateNum, message: '请输入数字', trigger: 'blur' },
          // { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '数值需大于0', trigger: 'blur' }
        ]
      },
      isEdit: false,
      fileList: [],
      uploadData: {
        key: '',
        token: ''
      },
      formDis: false,
      tinymceDis: false,

      selectShow: false,
      isDisabled: false
    }
  },
  computed: {
    ruleForm: function() {
      return this.$store.getters.ruleForm
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
    const _self = this;
    if (this.$route.query && JSON.stringify(this.$route.query) !== '{}') {
      this.isEdit = this.$route.query.hasOwnProperty('isEdit') ? JSON.parse(_self.$route.query.isEdit) : false;
      this.formDis = Boolean(this.$route.query.isLook)
      this.getActivityWorkDetailFn(this.$route.query.id)
    }
  },
  methods: {
    getActivityWorkDetailFn(id) {
      getActivityWorkDetail({ id }).then(response => {
        if (response.code === '200') {
          this.resList = response.data
          console.log('订单数据：', this.resList)
        } else {
          Message.error(response.message + '-' + response.data)
          this.listLoading = false
        }
      })
    },
    resetForm(formName) {
      this.resList = {
        name: '',
        introduction: '',
        imgUrl: '',
        province: '',
        city: '',
        county: ''
      }
      // this.options = regionData
      this.$refs[formName].clearValidate()
      // this.$refs.form.clearValidate(formName)
    },
    // 省市
    handleChange(value) {
      // this.tRuleForm.province = value[0] // CodeToText[value[0]]
      // this.tRuleForm.city = value[1] // CodeToText[value[1]]
      //  this.resList.province = CodeToText[value[0]]
      //  this.resList.city = CodeToText[value[1]]
      // this.resList.city = [CodeToText[value[0]], CodeToText[value[1]], CodeToText[value[2]]]
      // this.resList.city = [value[0], value[1], value[2]]
      this.resList.province = value[0]
      this.resList.city = value[1]
      this.resList.county = value[2]
      //  console.log('1:', this.resList.province, this.resList.city)
      console.log(this.resList.province, this.resList.city, this.resList.county)
    },
    request(data) {
      if (this.isEdit) { // 编辑
        // console.log('1-->', data)
        // // 因姓名不能修改， 传参时去掉名字字段
        // delete data.name
        // // 去掉创建时间字段
        // // delete data.createTime
        // console.log('2-->', data)
        // this.loading = true
        // updateSaleUser(data).then(response => {
        //   console.log(data)
        //   if (Number(response.code) === 200) {
        //     Message.success('编辑成功')
        //     this.$router.push('manage');
        //   } else {
        //     Message.error(response.message + '-' + response.data)
        //   }
        // })
      } else { // 新增
        addActivity(data).then(response => {
          console.log('正在新增')
          if (Number(response.code) === 200) {
            Message.success('新增成功')
            this.$router.go(-1);
          } else {
            Message.error(response.message + '-' + response.data)
          }
        });
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        //   if (this.resList.introduction === '') {
        //     Message.error('请填写作品介绍')
        //     return
        //   }
          if (this.resList.imgUrl === '') {
            Message.error('请上传图片')
            return
          }
          // console.log(this.resList)
          this.request(this.resList)
        } else {
          this.validateError()
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select,.el-cascader{
    display: block !important;
}
.title{
    margin-left: 20px;
}
  .tip {
    color: red;
  }
  .tin_box {
    border: 1px solid #ddd;
    padding: 0 10px 0 10px;
    color:#666;
  }
  .line{
    text-align: center;
  }

  /*上传图片*/
  .thumbnail{
        width: 302px;
        border: 1px solid #eee;
        border-radius: 5px;
        display: flex;
        // flex-item-align: center;
    }
    .thumbnail_video{
        padding: 10px;
        width: 340px;
        height: 200px;
        border: 1px solid #eee;
        border-radius: 5px;
        display: flex;
    }

    .thumbnail img{
        width: 100% ;
    }
    .uploadBox{
        width: 100%;
        position: relative;
    }
    .btn_clear{
        position: absolute;
        bottom: 0px;
        right: 0;
        padding: 10px 30px;
    }
</style>
